<template>
  <view>
    <view class="classnav_list" style="font-weight: 600">
      <view style="width: 24%">分类名</view>
      <view style="width: 24%">昵称</view>
      <!-- <view style="width: 24%">子分类</view> -->
      <view style="width: 10%">排序</view>
      <view style="width: 18%">操作</view>
    </view>
    <view class="classcontent_list">
      <view
        class="classcontent_item"
        v-for="(item, index) in classcontentlist"
        :key="index"
      >
        <!-- 分类名 -->
        <view style="width: 24%; text-align: left">{{ item.name }}</view>
        <!-- 昵称 -->
        <view style="width: 24%">{{ item.nickname }}</view>
        <!-- 查看子分类 -->
        <!-- <view style="width: 24%"> -->
        <!-- hasChild    1 有  2没有 -->
        <!-- <text v-if="item.hasChild == 1">查看</text> -->
        <!-- <text v-else>无</text> -->
        <!-- </view> -->
        <!-- 排序  按照权重 -->
        <view style="width: 10%">{{ item.weigh }}</view>

        <view
          style="width: 18%;display: flex;align-items: center;justify-content: space-evenly;v"
        >
          <!-- 修改 -->
          <u-icon
            name="edit-pen"
            color="#9e9d9d"
            @click="classcontentedit(item.id)"
          ></u-icon>
          <!-- 删除 -->
          <u-icon
            name="trash"
            color="#fd8080"
            @click="classcontentdel(item.id)"
          ></u-icon>
        </view>
      </view>
    </view>
    <view class="goodsadd" @click="classcontentadd()"> 新增 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 父id
      pid: "",
      classcontentlist: [],
    };
  },
  methods: {
    // 分类修改
    classcontentedit(id) {
      uni.navigateTo({
        url: "../classificationedit/classificationedit?id=" + id,
      });
    },
    //  分类删除
    classcontentdel(id, index) {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "确定删除此项?",
        success: function (res) {
          if (res.confirm) {
            uni.request({
              url: "http://gxyckf.1qit.com/api/admin.category/del", //仅为示例，并非真实接口地址。
              data: {
                id: id,
              },
              method: "POST",

              header: {
                token: uni.getStorageSync("token"),
              },
              success: (res) => {
                if (res.data.code == 1) {
                  that.classcontentlist.splice(index, 1);
                }
                that.viewGoodsList();
              },
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    //  分类添加
    classcontentadd() {
      uni.navigateTo({
        url: "../classificationadd/classificationadd",
      });
    },
    // 获取商品总分类
    viewGoodsList() {
      //   分类列表
      uni.request({
        // url: "http://gxyckf.1qit.com/api/admin.category/categorylist", //仅为示例，并非真实接口地址。
        url: "http://gxyckf.1qit.com/api/admin.category/addcategorylist", //仅为示例，并非真实接口地址。
        data: {
          //   pid: this.pid,
        },
        // method: "POST",
        method: "GET",

        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          if (res.data.code == 1) {
            console.log(res.data);
            this.classcontentlist = res.data.data;
            this.classcontentlist.map((item) => {
              console.log(item.name);
              var str = item.name;
              str = str.replace(/&nbsp;/gi, "   ");
              item.name = str;
            });
          }
        },
      });
    },
  },
  mounted() {
    this.viewGoodsList();
  },
};
</script>

<style>
page {
  background: #f6f6f6;
}
.classnav_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 94%;
  padding: 2% 3%;
  background: #fff;
  border-bottom: 1rpx solid #dcdcdc;
}
.classnav_list view {
  text-align: center;
  font-size: 32rpx;
  line-height: 2;
}
.classcontent_list {
  width: 94%;
  padding: 2% 3%;
  background: #fff;
}
.classcontent_list .classcontent_item:nth-last-child(1) {
  border-bottom: 0;
}
.classcontent_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #dcdcdc;
}
.classcontent_item view {
  text-align: center;
  font-size: 28rpx;
  line-height: 3;
}
.goodsadd {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}
</style>
